import React, {useEffect, useState} from 'react';
import './index.css'
import {dataList} from "./constants";

/**
 * 基于事件循环的列表（加快首次渲染）
 */
const EventLoopList = () => {

	const [renderList, setRenderList] = useState([])
	useEffect(() => {
		const loop = (total, start = 0) => {
			if(total <= 0) {
				return
			}
			const count = Math.min(total, 100)
			console.log(total)
			window.requestAnimationFrame(() => {
				setRenderList(pre => [...pre, ...dataList.slice(start, start + count)])
				loop(total - count, start + count)
			})
		}
		loop(dataList.length)
	}, [])
	return (
		<div className='virtualListContainer'>
			{
				renderList.map((item, index) => (
					<div className='virtualItem' key={item}>你好世界{index}</div>
				))
			}
		</div>
	);
};

export default EventLoopList;